const datas = [
    {
        name:"张三",
        age:18,
        sorc:99,
        level:'A'
    },
    {
        name:"李四",
        age:28,
        sorc:65,
        level:'B'
    },
    {
        name:"李娜",
        age:23,
        sorc:88,
        level:'A'
    },
    {
        name:"王晓",
        age:19,
        sorc:24,
        level:'C'
    },
    {
        name:"王明",
        age:21,
        sorc:20,
        level:'C'
    },
    {
        name:"王明明",
        age:21,
        sorc:98,
        level:'A'
    },
    {
        name:"李明明",
        age:21,
        sorc:98,
        level:'A'
    },
    {
        name:"张强",
        age:21,
        sorc:65,
        level:'C'
    },
    {
        name:"张强强",
        age:22,
        sorc:75,
        level:'B'
    },
    {
        name:"赵楠",
        age:20,
        sorc:100,
        level:'A'
    },
    {
        name:"赵楠楠",
        age:20,
        sorc:90,
        level:'A'
    },
    {
        name:"安娜",
        age:21,
        sorc:65,
        level:'C'
    },
    {
        name:"张小楠",
        age:20,
        sorc:80,
        level:'B'
    },
    {
        name:"李晓娜",
        age:20,
        sorc:80,
        level:'B'
    },
    {
        name:"李叶",
        age:27,
        sorc:70,
        level:'B'
    },
    {
        name:"白百合",
        age:20,
        sorc:80,
        level:'B'
    },
    {
        name:"李艺彤",
        age:20,
        sorc:80,
        level:'B'
    }
];

let $ = (sel) => document.querySelector(sel),
    endDatas = datas,
    tbody = $('#tab>tbody'),
    sel = $('.page'),
    order = $('.order'),
    search = $('#search'),
    page_box = $('.page_box'),
    pagelist = page_box.querySelector('ul'),
    count = sel.options[sel.selectedIndex].value,
    ordername = order.options[order.selectedIndex].value,
    page = 1;

function init(){
    // 默认值
    let defaults = {
        count:count,
        orderby:ordername,
        keyword:"",
        page:page
    };
    sel.addEventListener('change',() => {
        // 修改defaults中的count
        count = defaults.count = sel.options[sel.selectedIndex].value;
        page = 1;
        renderToTable(defaults);
    });
    order.addEventListener('change',() => {
        defaults.orderby = order.options[order.selectedIndex].value;
        renderToTable(defaults);
    });
    search.addEventListener('input',() => {
        defaults.keyword = search.value;
        renderToTable(defaults);
    })
    renderToTable(defaults);
}

function renderToTable(options){
    // 根据options修改数据datas
    let orderby = options.orderby,
        count_v = options.count,
        search = options.keyword,
        newDatas = [],
        pages,
        fn;
    if(search){
        newDatas = datas.filter((obj) => {
            return obj.name.indexOf(search) > -1;
        });
        count = sel.options[sel.selectedIndex].value;
        page = 1;
    }else{
        newDatas = datas;
    }
    pages = Math.ceil(newDatas.length / count_v);
    if(pages > 1){
        page_box.classList.add('show');
        let html = '';
        for(let p = 1; p <= pages; p++){
            html += '<li data-id="'+ p + '">' + p + '</li>';
        }
        pagelist.innerHTML = html;
        pagelist.firstElementChild.classList.add('cur');
    }else{
        page_box.classList.remove('show');
    }
    // 根据每页显示的条数，修改数据
    fn = (x,y) => x[orderby] - y[orderby]; 
    if(orderby === 'name'){
        fn = (x,y) => new Intl.Collator('zh-Hans-CN', { sensitivity: 'accent' }).compare(x.name, y.name); 
    }
    newDatas.sort(fn);
    render(newDatas);
    // 点击页数
    pagelist.addEventListener('click',(e) => {
        let target = e.target;
        if(target.nodeName === 'LI'){
            page = target.getAttribute('data-id');
            let cur = $('.cur');
            cur && cur.classList.remove('cur');
            target.classList.add('cur');
            // 改全局变量
            render(newDatas);
        }
    })
}

function render(newDatas){
    //console.log(count * (page-1),count * page);
    let endDatas = newDatas.slice(count * (page-1),count * page);
    tbody.innerHTML = endDatas.map((obj,idx) => {
        return `<tr>
                    <td>${obj.name}</td>
                    <td>${obj.age}</td>
                    <td>${obj.sorc}</td>
                    <td>${obj.level}</td>
                </tr>`;
    }).join("");
}
init();

let str = ' abc    ';   // new String()
String.prototype.trim = function(){
    return this.replace(/^\s* | \s*$/g,'');
}
console.log(str.trim().length);

// const chineseChars = ['橙', '苹', '桃', '杏', '葡'];

// function pinyinSort(a, b) {
    
// }
// const sortedChars = chineseChars.sort(pinyinSort);
// console.log(sortedChars);

